<template>
	<view class="loginBox">
		<view class="logo">
			<image src="/static/logo.png" mode="aspectFill"></image>
		</view>
		<view class="title">
			欢迎登录裕酷
			<view class="bottom">
				<image src="/static/border-bottom.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="login-btn">
			<!-- getPhoneNumber -->
			<button class="submit-button" :open-type="type" @getphonenumber="getUserPhoneNumber" @click="AgreeChecked">
				手机号码一键登录
			</button>
		</view>
		<view class="checkbox">
			<checkbox-group class="groop" @click="changeChecked">
				<checkbox color="#0a49ff" :checked="checked" style="transform:scale(0.7)" />
				<view class="info">
					我已阅读并同意
				</view>
			</checkbox-group>
			<navigator url="/packageA/pages/UserAgreement/UserAgreement">《用户隐私协议》</navigator>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'
	export default {
		name: 'Login',
		data() {
			return {
				code: '',
				phone: '',
				checked:false,
				type:''
			}
		},
		onLoad(option) {
			uni.login({
				success: (res) => {
					if (res.errMsg == "login:ok") {
						this.code = res.code;
					} else {
						uni.utils.toast('系统异常，请联系管理员')
					}
				}
			})
			if (getToken()) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			changeChecked(){
				this.checked = !this.checked;
				if(this.checked)this.type="getPhoneNumber";
				else this.type = "";
			},
			AgreeChecked(){
				if(!this.checked){
					uni.utils.toast('请先阅读并同意用户隐私协议');
				}
			},
			async getUserPhoneNumber(e) {
				if(!this.changeChecked)return ;
				let {
					errMsg
				} = e.detail;
				if (errMsg === "getPhoneNumber:ok") {
					let {
						encryptedData,
						iv
					} = e.detail;
					let {
						code
					} = this;
					let res = await this.$store.dispatch('user/login', {
						code,
						encryptedData,
						iv
					})
					if(res.code !== 200) {
						uni.login({
							success: (res) => {
								if (res.errMsg == "login:ok") {
									this.code = res.code;
								} else {
									uni.utils.toast('系统异常，请联系管理员')
								}
							}
						})
					}
				} else {
					uni.utils.toast('用户拒绝授权')
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.loginBox {
		position: relative;
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.logo {
			width: 200rpx;
			height: 200rpx;
			margin-top: -500rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 48rpx;
			font-weight: 600;
			color: #1A1A1A;
			margin: 40rpx 0;
			position: relative;
			.bottom{
				position: absolute;
				width: 120rpx;
				height: 16rpx;
				image{
					width: 100%;
					height: 100%;
				}
				bottom: 35rpx;	
			}
		}

		.login-btn {
			padding: 0 60rpx;
			/deep/ button {
				width: 630rpx !important;
				border-radius: 50rpx !important;
				background-color: #2f64ff !important;
				color: #fff;
			}
		}
		.checkbox{
			position: absolute;
			bottom: calc(var(--window-bottom) + 30px);
			display: flex;
			justify-content: center;
			align-items: center;
			.groop{
				display: flex !important;
				align-items: center;
			}
			.info{
				white-space: nowrap;
				font-size: 24rpx;
			}
			
			navigator{
				color: #3b61ff;
				font-size: 24rpx;
				display: inline-block;
			}
		}
	}
</style>